<template>
  <div class="monthWarn-box">
    <div class="monthWarn-content" flex="dir:top box:first">
      <div class="title">垃圾桶溢满度排名</div>
      <!--本月报警echarts趋势图-->
      <div class="month-warn"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dustRank',
  props: ['deptId'],
  data () {
    return {
      charts: '', // echarts 实例
      allMonthWarnData: 186,
      echartsData: [], // 获取到的本月报警趋势数据
      echartsXData: []
    }
  },
  mounted () {
    this.init()
  },
  destroyed: function () {
    // this.charts.clear()
  },
  methods: {
    // 获取垃圾箱满溢度Top Five
    init: function () {
      let url = this.$base.getUrl('rosdustbininfo/topFive')
      let params = {
        url: url,
        data: {
          deptId: this.deptId
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        this.dustbinList = res
        let echartsData = []
        let echartsXData = []
        if (res && res.length !== 0) {
          res.map(item => {
            echartsData.push(parseInt(item.garbagePer))
            echartsXData.push(item.id + '号桶')
          })
        }
        this.echartsData = echartsData
        this.echartsXData = echartsXData
        this.echartFun()
      })
    },
    echartFun () {
      this.charts = this.$echarts.init(
        document.getElementsByClassName('month-warn')[0]
      )
      let option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value + '%'
            }
            return relVal
          }
        },
        grid: {
          left: '0',
          right: '0',
          top: '30%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.echartsXData,
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#9FACC3',
                opacity: '0.5'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#9FACC3',
                opacity: '0.3'
              }
            }
          }
        ],
        yAxis: [
          {
            axisTick: { show: false },
            type: 'value',
            boundaryGap: true,
            // max: 1,
            // min:2,
            splitNumber: 3,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#9FACC3'
              },
              formatter: '{value} %'
            },
            axisLine: {
              lineStyle: {
                width: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#9FACC3',
                opacity: '0.3'
              }
            }
          }
        ],
        series: [
          {
            name: '满溢度',
            type: 'bar',
            barGap: '8%',
            barWidth: 8,
            // barWidth: "60%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#F57BB7' },
                    { offset: 1, color: '#EFB486' }
                  ]
                ),
                label: {
                  show: false,
                  position: 'top',
                  formatter: '{b}\n{c}%'
                }
              }
            },
            data: this.echartsData
          }
        ]
      }
      this.charts.setOption(option, true)
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped lang="less">
.monthWarn-box {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}

.monthWarn-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(43, 54, 72, 0.7);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 20px;
  box-sizing: border-box;
}

.monthWarn-content .title {
  color: #ffffff;
  font-size: 14px;
}

.month-warn {
  width: 100%;
}

.monthWarndata {
  position: absolute;
  top: 4%;
  right: 9%;
  font-size: 30px;
  color: #f5a623;
}
</style>
